<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
  <head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>editform</title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/themes/default/easyui.css" />
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/themes/icon.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/homepages/css/main.css" type="text/css"></link>
    	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.4.4.min.js"></script>
 		<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.1.2.2.js"></script>
 		<script type="text/javascript" src="${pageContext.request.contextPath}/homepages/js/forms.js"></script>
 		<script type="text/javascript">
 			$(function(){
	 			$('#columnsDiv').datagrid({
	 				nowrap: false,
					striped: true,				 
					collapsible:true,
					autoRowHeight: false,		
					sortName: 'code',
					sortOrder: 'desc',
					remoteSort: false,
					idField:'code',
					fitColumns:true,
					columns:[[]],
					pagination:true,
					rownumbers:true,
					toolbar:[{
						id:'btnadd',
						text:'Del',
						iconCls:'icon-remove',
						handler:function(){
							$('#dd').dialog({
								'open':true,
								'modal':true
							});
						}
					}]
					});
				loadColumn();
			});
			
			function loadColumn(){
				$.ajax({
					type:'get',
					url:'${pageContext.request.contextPath}/pages/loaddataGrid.json',
					dataType:'json',
					success:function(data){
						$('#columnsDiv').datagrid("mergeCells",data.columns);
						$('#columnsDiv').datagrid("loadData", data);
					},
					error:function(){
						$.messager.alert("结果", "错了!", "info", null); 
					}
				});
			}
			//添加列，并且根据传入的dsid 查询所有的相关数据
			function addColumns(){
				$.ajax({
					type:'get',
					url:'${pageContext.request.contextPath}/sys/saveCol',
					data:$('#addCol').serialize(),
					dataType:'json',
					success:function(data){
					//返回数据未绑定
						alert(data.rows);
						var options = {  
							width: "auto",  
							height: "auto",  
							rownumbers: true  
						};  
						options.columns = eval(data.columns);
						$('#columnsDiv').datagrid(options);//根据配置选项，生成datagrid  
						$('#columnsDiv').datagrid("loadData", data);	
					},
					error:function(d){
						$.messager.alert("结果", "错了!", "info", null); 
					}
				});
			}
 		</script>
  </head>
  
	 <body class="easyui-layout" >
		    <div region="west" style="width:220px;">
		    	<div class="easyui-panel" title="列属性" fit="true" border="false">
	 	<form id="addCol">
			     		
			     	<table id="editform">
			     		<tr><td colspan="2">
			     				<input type="button" value="添加" onclick="addColumns()"/>
			     				<input type="button" value="重置"/>
			     			</td>
			     		</tr>
			     		<tr>
			     			<td class="efn"><span>表ID</span></td><td><input type="text" name="dsid"/></td>
			     		</tr>
			     		<tr>
			     			<td class="efn"><span>英文名</span></td><td><input type="text" name="name" /></td>
			     		</tr>
			     		<tr>
			     			<td class="efn"><span>界面名称</span></td><td><input type="text" name="colnName"/></td>
			     		</tr>
			     		<tr>
			     			<td class="efn" title="如果是分组名，则填写，否则不填写">组ID</td>
			     			<td><input type="text" name="groupId"/></td>
			     		</tr>
			     		<tr>
			     			<td class="efn"><span>组名</span></td><td><input type="text" name="groupName"/></td>
			     		</tr>
			     		
			     		<tr>
			     			<td class="efn">数据源</td><td><input type="text" name="ediType"/></td>
			     		</tr>
			     		<tr>
			     			<td class="efn">排序号</td><td><input type="text" name="orderNum"/></td>
			     		</tr>
			     		<tr>
			     			<td class="efn" colspan="2">
			     				<input type="checkbox" name="readOnly"/>只读
					     		<input type="checkbox" name="required"/>必须
					     		<input type="checkbox" name="singleRow"/>独行
					     	</td>
			     		</tr>
			     		<tr>
			     			<td class="efn">宽度</td><td><input type="text" name="width"/></td>
			     		</tr>
			     		<tr>
			     			<td class="efn">长度</td><td><input type="text" name="height" /></td>
			     		</tr>
			     		<tr>
			     			<td class="efn">JAVA类</td><td><input type="text" name="javaClass"/></td>
			     		</tr>
			     		<tr>
			     			<td class="efn">JAVA属性</td><td><input type="text" name="javaProperty"/></td>
			     		</tr>
			     		<tr>
			     			<td class="efn">加载相似</td><td><input type="text" name="openLoadType"/></td>
			     		</tr>
			     	</table>
		  </form>
			    </div>
		    </div>  
		    <div region="center" style="padding:5px;">
		    	<div id="columnsDiv">
		    	</div>
		    </div>  
	</body>
</html>
